<template>
	<m-layout title="我的礼包发货列表">
		<view class="content">
			<m-block gap="30" spa="0 0 20" v-for="(item,index) in listArr" class="listBox">
				<view class="fs24">
					<text>发货时间：</text>
					<text>{{item.ctime.replace("T"," ")}}</text>
				</view>
				<!-- <view class="fs24 mt-16">
					<m-block bgColor="#eeedfa" gap="16" spa="12 0">
							<view class="flex ">
								<text class="fs24 fw-600">发货商品：</text>
								<view class="ml-12 flex ai-flex-start">
									<m-image2  :size="[120,120]" :src="item.picurl" />
									<view class=" flex ml-12 fs26 ">{{item.titel}}</view>
								</view>
							</view>
					</m-block>
				</view> -->
				<!-- <view class="flex-between mt-16">
					<text class="fs26 fw-600">物流单号：{{item.waybillnumber}}</text>
					<m-button class="mr-12 plr-48" size="small" type="hollow"
						@click="Jump('/pages/webview/webview?url=https://m.kuaidi100.com/app/query/?nu='+item.waybillnumber)">查看物流</m-button>
				</view> -->
				<view class="flex-between mt-16">
					<view class="flex-column pt-12" style="width: 100%;">
						<text class="fs26 fw-600">物流单号：</text>
						<view class="flex-between ptb-4" v-for="item in item.waybillnumber.split(',')">
							<view class="flex">
								<text class="fs25 text-primary">{{item}}</text>
								<m-copy class="ml-16" :str="item"></m-copy>
							</view>
							<m-button class="mr-12 plr-48" size="small" type="hollow"
								@click="Jump('/pages/webview/webview?url=https://m.kuaidi100.com/app/query/?nu='+item)">查看物流</m-button>
						</view>
					</view>

				</view>
			</m-block>
			<m-empty :loading="isLoading" v-if="listArr.length<=0" spa="120 0" title="未查询到数据" size="300"
				icon='empty'></m-empty>
		</view>
	</m-layout>
</template>

<script>
	import { mapState, mapActions } from 'vuex';
	import { hhrwaybillpage, hhrpageFromCompy } from '@/api/Users.js';
	export default {
		name: 'shopList',
		data() {
			return {
				idx: 0,
				pageIndex: 1, // 当前页数
				pageSize: 10,
				pageCount: 1, // 列表总页数（用于加载更多）
				listArr: [], // 主列表
				isLoading: false,
			}
		},
		onLoad({ idx }) {
			this.idx = idx;
		},
		onShow() {
			this.initData();
		},
		onPullDownRefresh() {
			this.initData();
		},
		onReachBottom() {
			if (this.pageIndex < this.pageCount) {
				this.pageIndex += 1;
				this.getList();
			}
		},
		methods: {
			///////////////////////////////////// 初始化 ////////////////////////////////////////
			initData() {
				this.isEditor = false;
				this.pageIndex = 1;
				this.pageSize = 10;
				this.pageCount = 1;
				this.listArr = [];
				this.getList();
			},
			///////////////////////////////////// 网络请求 ////////////////////////////////////////
			// 获取主列表
			async getList() {
				if (this.pageIndex > this.pageCount) {
					return
				}
				this.isLoading = true;
				const { list, pageCount } = await hhrwaybillpage({
					idx: this.idx,
					pageSize: this.pageSize,
					pageIndex: this.pageIndex,
				});
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			},
			onPullDownRefresh() {
				this.initData();
			},
			onReachBottom() {
				this.getList();
				console.log('触底了');
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 24rpx;
	}

	.listBox {
		position: relative;
	}

	.tag {
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		padding: 12rpx 32rpx;
		color: #FFFFFF;
		background-color: #786BFF;
		font-size: 21rpx;
		border-radius: 0rpx 20rpx 0rpx 24rpx;
		position: absolute;
	}
</style>